<template>
	<page-meta :page-style="'overflow:' + (isShowPopup ? 'hidden' : 'visible')"></page-meta>
	<view class="page-container bg-grey fs-24" v-if="orderDetail.state">
		<up-navbar
			safeAreaInsetTop
			fixed
			placeholder
			:title="NameObj[orderDetail.spu_type]"
			@left-click="pageBack"
		></up-navbar>
		<view :class="['plr-24', { 'pb-fixed-bottom': showBottomWrap }]">
			<view class="ptb-32">
				<view class="fs-48 font-bold">{{ orderDetail.state_name }}</view>
				<view class="c-black-_4 mt-8">
					<template v-if="showCountDown">支付剩余时间 {{ countDownStr }}</template>
					<template v-else>{{ filterStatusDesc(orderDetail.state) }}</template>
				</view>
			</view>
			<view class="ticket-order-info radius-16 plr-24 ptb-32 bg-white">
				<view class="shop-info flex-a pb-20">
					<image :src="orderDetail.store_logo_url" class="icon-40 circle" />
					<view class="flex-1 ml-10">
						{{ orderDetail.store_name }}
						<text class="arrow-right ml-4"></text>
					</view>
				</view>
				<!-- 线路 -->
				<view class="line-info" v-if="orderDetail.spu_type === OrderType.LINE">
					<view class="flex-row mb-24">
						<view class="fs-32 font-bold text-2-ellipsis m-w-500 flex-1 mr-24 name-text">
							{{ orderDetail.sku_display_name }}
						</view>
						<view class="order-price">
							<view class="fs-36 font-bold">
								<text class="fs-26">&yen;</text>
								{{ priceInCent(orderDetail.net_amount_in_cent) }}
							</view>
							<view class="mt-10 c-black-_6 text-right">x{{ orderDetail.net_quantity }}份</view>
						</view>
					</view>
					<line-info :order-detail="orderDetail"></line-info>
					<view class="mt-32">
						<zjy-button
							type="line"
							@click="
								navigateTo('/pages/order/detail/routeDetail', {
									id: orderDetail.sku_id,
									tour_date: orderDetail.tour_date,
									sku_name: orderDetail.sku_name,
								})
							"
						>
							<image :src="imgBaseUrl + 'route-icon.png'" class="icon-24 mr-4" />
							查看行程详情
						</zjy-button>
					</view>
					<view class="divide-line mt-32 mb-32"></view>
					<line-notice :order-detail="orderDetail"></line-notice>
				</view>
				<!-- 景区||联票 -->
				<view v-else class="base-info flex">
					<image class="sku-cover" :src="orderDetail.sku_cover_url" />
					<view class="flex-1 flex-col ml-16">
						<view class="flex-row">
							<view class="fs-32 font-bold text-2-ellipsis m-w-500 flex-1 mr-24 name-text">
								{{ orderDetail.sku_display_name }}
							</view>
							<view class="order-price">
								<view class="fs-36 font-bold">
									<text class="fs-26">&yen;</text>
									{{ priceInCent(orderDetail.net_amount_in_cent) }}
								</view>
								<view class="mt-10 c-black-_6 text-right">x{{ orderDetail.net_quantity }}份</view>
							</view>
						</view>
						<view class="c-grey-86 lh-1_5 mt-14">游玩日期：{{ orderDetail.tour_date }}</view>
					</view>
				</view>

				<template v-if="hasVoucherCode">
					<template v-if="orderDetail.spu_type !== OrderType.LINE">
						<view class="divide-line mt-32 mb-32"></view>
						<view class="use-notice flex-a mb-32" v-if="orderDetail.sale_use_tips">
							<text>凭「订单票码」先换票再入园</text>
							<view class="flex-a" @click="showTipClick">
								<text>使用须知</text>
								<text class="arrow-right theme ml-4"></text>
							</view>
						</view>
						<view>
							<view class="space-between">
								<view class="flex-a">
									<view class="font-bold fs-32">订单票码</view>
									<view
										class="fs-24 ml-12 c-black-_4"
										v-if="orderDetail.state === orderStatus.AVAILABLE"
									>
										剩余
										<text class="c-theme">
											{{ orderDetail.net_quantity }}
										</text>
										份可用
									</view>
								</view>
								<view class="flex-a c-grey-86" @click="showLogClick">
									<text>使用明细</text>
									<text class="arrow-right ml-4"></text>
								</view>
							</view>
							<!-- 景区订单票码 -->
							<view
								v-if="orderDetail.spu_type === OrderType.SCENIC"
								class="ticket-code-wrap pos-rel flex-col flex-c pb-16"
							>
								<view v-if="orderDetail.state === orderStatus.PAID">
									出票中，
									<text class="c-theme" @click.native.stop="getOrderDetail">点击刷新</text>
								</view>
								<view class="c-black-_4" v-if="orderDetail.net_quantity === 0">订单已退款</view>

								<!--待使用或已使用 -->
								<template v-if="orderDetail.vouchers.length > 1">
									<view class="pb-20 text-center">
										<text class="c-black-_9">{{ currentIndex + 1 }}</text>
										<text class="c-black-_2 mlr-5">/</text>
										<text class="c-black-_2">{{ orderDetail.vouchers.length }}</text>
									</view>
									<swiper class="swiper" :current="currentIndex" @change="handleSwiperChange">
										<block v-for="(item, index) in orderDetail.vouchers" :key="index">
											<swiper-item>
												<view class="code-wrap">
													<zjy-qrcode
														:text="item.voucher_code"
														:opacity="item.state == -10"
													></zjy-qrcode>
													<code-refund class="code-disabled" v-if="item.state == -10" />
												</view>
												<view class="text-center pt-10 fs-26" v-if="item.state == 20">
													已使用
												</view>
												<view class="text-center code-text">
													{{ item.voucher_code }}
												</view>
											</swiper-item>
										</block>
									</swiper>
									<view
										class="arrow-circle arrow-circle-left"
										:class="currentIndex < 1 ? 'disabled' : ''"
										@tap="prev"
									></view>
									<view
										class="arrow-circle arrow-circle-right"
										:class="currentIndex == orderDetail.vouchers.length - 1 ? 'disabled' : ''"
										@tap="next"
									></view>
								</template>
								<template v-else>
									<block v-for="(item, index) in orderDetail.vouchers" :key="index">
										<view class="code-wrap">
											<zjy-qrcode
												:text="item.voucher_code"
												:opacity="item.left_quantity == 0"
											></zjy-qrcode>

											<code-refund class="code-disabled" v-if="item.state == -10" />
										</view>
										<view
											class="text-center pt-10 fs-26 disabled-text"
											v-if="item.left_quantity == 0"
										>
											<view class="text">已使用</view>
											<view class="date">{{ formatTimeWithoutSeconds(item.used_time) }}</view>
										</view>
										<view class="text-center code-text">
											{{ item.voucher_code }}
										</view>
									</block>
								</template>
							</view>
							<!-- 联合订单票码 -->
							<view v-else-if="orderDetail.spu_type === OrderType.UNITE">
								<tab-code :order-detail="orderDetail" @getOrderDetail="getOrderDetail"></tab-code>
							</view>
						</view>
					</template>
				</template>
				<template v-else>
					<template v-if="orderDetail.tourists.length > 0">
						<view class="divide-line mt-32 mb-32"></view>
						<tourist :order-detail="orderDetail" :inner="true"></tourist>
					</template>
				</template>
			</view>

			<tourist :order-detail="orderDetail" v-if="hasVoucherCode"></tourist>

			<order-info :order-detail="orderDetail"></order-info>
		</view>
		<view class="bottom-fixed-wrap">
			<template v-if="orderDetail.state == orderStatus.INITIAL">
				<view class="flex-1 flex-a-end font-500 font-oppo c-red">
					<view class="flex-a-baseline">
						<text class="fs-28">&yen;</text>
						<text class="fs-48 ml-2">{{ priceInCent(orderDetail.net_amount_in_cent) }}</text>
					</view>
				</view>
				<view class="flex-2 flex-a">
					<view class="flex-1" @click="cancelOrder">
						<zjy-button type="line">取消订单</zjy-button>
					</view>
					<view class="flex-1 ml-18">
						<zjy-button @click="navigateTo('/pages/order/pay', { stmt_id: orderDetail.stmt_id })">
							立即支付
						</zjy-button>
					</view>
				</view>
			</template>

			<template v-if="[orderStatus.WAIT_CONFIRM, orderStatus.AVAILABLE].includes(orderDetail.state)">
				<view class="flex-1">
					<zjy-button type="line">申请退款</zjy-button>
				</view>
				<view class="flex-1 ml-18">
					<zjy-button>再来一单</zjy-button>
				</view>
			</template>
			<template v-if="[orderStatus.DONE].includes(orderDetail.state)">
				<view class="flex-1">
					<zjy-button type="line">再来一单</zjy-button>
				</view>
				<view class="flex-1 ml-22">
					<zjy-button>去评价</zjy-button>
				</view>
			</template>
			<template v-if="[orderStatus.CLOSED].includes(orderDetail.state)">
				<view class="flex-1">
					<!-- <zjy-button type="line">再来一单</zjy-button> -->
				</view>
				<view class="flex-1 ml-22">
					<zjy-button>再次预定</zjy-button>
				</view>
			</template>
		</view>

		<!-- 弹窗须知 -->
		<using-tips
			v-model="showTipPopup"
			:listData="orderDetail.sale_use_tips"
			:suitable_humans="orderDetail.suitable_humans"
			v-if="orderDetail.sale_use_tips"
		></using-tips>
		<!-- 使用明细 -->
		<using-logs v-model="showLogPopup" :listData="orderDetail.consume_logs"></using-logs>
	</view>
</template>
<script lang="ts" setup>
import { onLoad, onShow } from "@dcloudio/uni-app"
import { $getOrderDetail, $cancelOrder } from "@/api/order"
import { OrderStatus, VoucherStatus, OrderStatusMap, OrderType } from "@/constants/order"
import { priceInCent } from "@/mixins/mixins"
import { addZero, formatTimeWithoutSeconds } from "@/utils/tools"
import codeRefund from "@/pages/order/components/code-refund.vue"

import { navigateTo, pageBack } from "@/utils/page-redirect"
import Tourist from "@/pages/order/components/tourist.vue"
import OrderInfo from "@/pages/order/components/order-info.vue"
import TabCode from "@/pages/order/components/tab-code.vue"
import LineInfo from "@/pages/order/components/line-info.vue"
import LineNotice from "@/pages/order/components/line-notice.vue"
import UsingTips from "@/pages/order/components/using-tips.vue"
import UsingLogs from "@/pages/order/components/using-logs.vue"

let orderId = ""

const orderStatus = OrderStatus
const voucherStatus = VoucherStatus
const orderDetail = ref({})
const currentIndex = ref(0)
const imgBaseUrl = inject("imgBaseUrl")
const NameObj = {
	10: "景点订单详情",
	20: "景点联票订单详情",
	30: "线路订单详情",
}
const getOrderDetail = () => {
	$getOrderDetail(orderId).then((data: any) => {
		orderDetail.value = data
		if (data.state == orderStatus.INITIAL) {
			countDownPay(data.deadline)
		}
	})
}

// 过滤订单状态，返回中文描述
const filterStatusDesc = (state) => {
	return OrderStatusMap.find((item) => item.id == state)?.description
}
const hasVoucherCode = computed(() => {
	return [orderStatus.AVAILABLE, orderStatus.DONE].includes(orderDetail.value.state)
})

const showBottomWrap = computed(() => {
	return true
})

const showTipPopup = ref(false)
const showTipClick = () => {
	showTipPopup.value = true
}

const showLogPopup = ref(false)
const showLogClick = () => {
	showLogPopup.value = true
}
const isShowPopup = computed(() => {
	return showTipPopup.value || showLogPopup.value
})
// 是否已使用
const isUsed = computed(() => {
	return [OrderStatus.DONE].includes(orderDetail.value.state)
})
//#region 二维码轮播
const handleSwiperChange = (event) => {
	currentIndex.value = event.detail.current
}
const prev = () => {
	if (currentIndex.value < 1) return
	currentIndex.value =
		(currentIndex.value - 1 + orderDetail.value.vouchers.length) % orderDetail.value.vouchers.length
}
const next = () => {
	if (currentIndex.value == orderDetail.value.vouchers.length - 1) return
	currentIndex.value = (currentIndex.value + 1) % orderDetail.value.vouchers.length
}
//#endregion

//#region 支付倒计时
const showCountDown = ref(false)
const countDownStr = ref("00:00")
const countDownTimer = ref()
const countDownPay = (deadlineDate: string) => {
	var deadLineTime = Date.parse(deadlineDate)
	if (deadLineTime > new Date().getTime()) {
		countDownTimer.value = null
		countDown(deadLineTime)
		showCountDown.value = true
	}
}
const countDown = (deadLineTime: number) => {
	var leftSeconds = (deadLineTime - new Date().getTime()) / 1000
	if (leftSeconds <= 0) {
		clearTimeout(countDownTimer.value)
	} else {
		var m = Math.floor((leftSeconds / 60) % 60),
			s = Math.floor(leftSeconds % 60)
		countDownStr.value = addZero(m < 0 ? 0 : m) + ":" + addZero(s < 0 ? 0 : s)
		countDownTimer.value = setTimeout(() => {
			countDown(deadLineTime)
		}, 1000)
	}
}
//#endregion

const cancelOrder = () => {
	uni.showModal({
		title: "提示",
		content: "您确定要取消订单吗？",
		success: (res) => {
			if (res.confirm) {
				$cancelOrder(orderId).then(() => {
					uni.showToast({
						title: "操作成功",
						icon: "none",
					})
					setTimeout(() => {
						showCountDown.value = false
						getOrderDetail()
					}, 2000)
				})
			}
		},
	})
}

onLoad((options) => {
	orderId = options?.id
})
onShow(() => {
	getOrderDetail()
})
</script>

<style scoped lang="scss">
.sku-cover {
	width: 136rpx;
	height: 136rpx;
	border-radius: 16rpx;
}

.bd-right {
	border-right: 1rpx solid #e7e7e7;
	transform: rotate(360deg);
}

.tourist-item {
	margin-top: 28rpx;
	display: flex;

	& > text {
		&:first-child {
			font-size: 28rpx;
			color: $c-grey-86;
			line-height: 40rpx;
		}

		&:last-child {
			font-size: 28rpx;
			line-height: 40rpx;
			margin-left: 48rpx;
		}
	}
}

.info-item {
	line-height: 40rpx;

	& > view:first-child {
		margin-right: 0;
	}
}

.ticket-order-info {
	z-index: 2;

	.base-info {
		display: flex;
		position: relative;

		.name-text {
			height: 86rpx;
		}
	}

	.divide-line {
		position: relative;
		border-bottom: 1rpx dashed $c-grey-f3;

		&::before {
			position: absolute;
			content: "";
			left: -36rpx;
			bottom: -12rpx;
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			background: $grey;
		}

		&::after {
			position: absolute;
			content: "";
			right: -36rpx;
			bottom: -12rpx;
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			background: $grey;
		}
	}

	.use-notice {
		border-radius: 12rpx;
		padding: 16rpx;
		background: rgba(254, 224, 56, 0.1);
		// color: $brown-7c;
		color: #bc8400;
		justify-content: space-between;
	}
}

.card-line {
	border-bottom: 1rpx dashed $c-grey-f3;
}

.ticket-code-wrap {
	position: relative;
	padding-top: 40rpx;
	.disabled-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 240rpx;
		height: 104rpx;
		background: #ffffff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #e5e6eb;
		display: flex;
		flex-direction: column;
		align-items: center;
		.date {
			font-size: 20rpx;
			color: #86909c;
			margin-top: 4rpx;
		}
	}

	.swiper {
		width: 240rpx;
		height: 320rpx;
	}

	.arrow-circle {
		position: absolute;
		top: calc(50% - 15px);
		width: 60rpx;
		height: 60rpx;
		display: inline-block;
		background-position: center center;
		background-size: cover;

		&.disabled {
			opacity: 0.5;
		}
	}

	.arrow-circle-right {
		right: 10px;
		background-image: url(#{$imgBaseUrl}/circle-left.png);
		transform: rotate(180deg);
	}

	.arrow-circle-left {
		left: 10px;
		background-image: url(#{$imgBaseUrl}/circle-left.png);
	}
}

.code-wrap {
	position: relative;

	.code-used,
	.code-disabled {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(50% - 55rpx);
		background: #ffffff;
		border-top: 2rpx solid #e5e6eb;
		border-bottom: 2rpx solid #e5e6eb;
	}
}

.code-text {
	color: $c-black-_9;
	padding: 8rpx 16rpx;
	margin-top: 16rpx;
	border-radius: 8rpx;
	font-weight: 500;
	background: rgba(243, 243, 243, 0.6);
}
</style>
